<template>
  <div>
    <div id="circleProcess"></div>
    <div style="font-size: 10px; font-weight:normal;">短信已使用</div>
  </div>
</template>
<script>
  export default {
    props:{
      myNum:{
        type: Array,
        default: [20, 80],
      },
      myWidth:{
        type: String,
        default: "40px",
      },
      myHeight:{
        type: String,
        default: "40px",
      },
    },
    mounted() {
      this.drawCharts();
    },
    methods: {
      drawCharts() {
        var myDiv = document.getElementById('circleProcess');
        myDiv.setAttribute("style","width:100%;height:60%;")
        var myChart = this.$echarts.init(myDiv);
        var option = {
          //  提示框组件
          tooltip: {
              //是否显示提示框组件，包括提示框浮层和 axisPointe
              show:false,
              // 触发类型: item:数据项触发，axis：坐标轴触发
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          color:['#3463d8','#00a5ff'],
          series: [
              {
                  name: '短信使用情况',
                  type: 'pie',
                  radius: ['70%', '90%'],
                  avoidLabelOverlap: false,
                  hoverAnimation: false,
                  label: {
                      show: false,
                      position: 'center'
                  },
                  emphasis: {
                      label: {
                          show: false,
                          fontSize: '40',
                          fontWeight: 'bold'
                      }
                  },  
                  labelLine: {
                      show: false
                  },
                  data: [
                    {   // 数据值
                      value:this.myNum[0], 
                      // 单个扇区的标签配置
                      label: {
                        normal: {
                            // 是显示标签
                            show: true,
                            position: 'center',
                            fontSize: 18,
                            color:'#00e3e6',
                            // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                            formatter:'{d}%',
                        }
                      },
                    },
		                {
		                    value:this.myNum[1], 
		                    label:{
		                        normal:{
		                            show:false,
		                        }
		                    }
		                },
                  ]
              }
          ]
        };  
        myChart.setOption(option);
      },
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>